﻿Ext.define('Grails.plugin.Viewport', {
    extend: 'Ext.container.Viewport',
    
    initComponent: function(config){
		config = config || {};
        this.store = config.store || Ext.create('Ext.data.TreeStore', {
			root: {
					expanded: true,
					children: [
						{ text: "测试1", id:"test1", name: "xtype1", leaf: true },
						{ text: "测试2", id:"test2", name: "xtype2", leaf: true },
						{ text: "测试3", id:"test3", name: "xtype3", leaf: true },
						{ text: "测试4", id:"test4", name: "xtype4", leaf: true }
					]
				}
		});
        Ext.apply(this, {
            layout: 'border',
            padding: 5,
            items: [this.createNorthPanel(), this.createMenuPanel(), this.createMainPanel()]
        });
        this.callParent(arguments);
    },
	
    createNorthPanel: function(){
		return {
            region: 'north',
            height: 60,
            minHeight: 60,
            html: 'north'
        }
	},
	
    createMenuPanel: function(){
        this.menupanel = Ext.create('Ext.tree.Panel', {
            region: 'west',
			title: '导航菜单',
            collapsible: true,
            split: true,
            width: 300,
            minWidth: 100,
            minHeight: 140,
            //xtype:'treepanel',
			autoScroll: true,
			store: this.store,
			hideHeaders: true,
			rootVisible: false,
			listeners: {
                scope: this,
                itemclick: this.openTab
            }			
        });
        return this.menupanel;
    },
    
    createMainPanel: function(){
       this.tabs = Ext.create('Ext.tab.Panel', {
			region: 'center',
			items: [
			{
				title: 'Welcom',
				html : '欢迎登录后台管理'
			}
			]
		});
		return this.tabs;
    },
    
    openTab: function(tree, record, item, index, e, opts){
		 var tab = Ext.getCmp('grails-app-tab-' + record.data.id);
		 if (!tab){
			var app = new Grails.security.User();
			var appPanel = app.createGridPanel();
			tab = this.tabs.add({
				xtype:'panel',
				layout:'fit',
				autoScroll: true,
				id:'grails-app-tab-' + record.data.id,
				title:app.gridTitle,
				items:appPanel
			})
		}
		this.tabs.setActiveTab(tab)
	}
});
